<template>

	<el-dialog
			width="60%"
			:before-close="dataFormCancle"
			:title="title"
			:close-on-click-modal="false"
			:visible.sync="visible">
		<el-card>
			<div slot="header" class="clearfix">
			    <span>会员信息</span>
			  </div>
			<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="dataForm.name" placeholder="姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-select style="width: 100%;" v-model="dataForm.sex" placeholder="性别" clearable>
							  <el-option v-for="dict in dict.type.sys_user_sex" :key="(dict.value)" :label="dict.label"
								:value="Number(dict.value)" />
							</el-select>
					  </el-form-item>
					</el-col>
					</el-row>
					<el-row>
					<el-col :span="12">
						<el-form-item label="年龄" prop="age">
							<el-input v-model="dataForm.age" placeholder="年龄"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="mobile">
							<el-input v-model="dataForm.mobile" placeholder="联系电话">
								<el-button slot="append" @click="searchInfo" icon="el-icon-search"></el-button>
							</el-input>
						</el-form-item>
					</el-col>
					</el-row>
					<el-row>
					<el-col :span="12">
						<el-form-item label="住址" prop="location">
							<el-input type="textarea" rows="6" v-model="dataForm.location" placeholder="住址"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" rows="6" v-model="dataForm.remark" placeholder="备注"></el-input>
						</el-form-item>
					</el-col>
					</el-row>
					<!--< el-col :span="12">
						<el-form-item label="编号" prop="num">
							<el-input v-model="dataForm.num" placeholder="编号"></el-input>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="12">
						<el-form-item label="创建时间" prop="createTime">
							<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
						</el-form-item>
					</el-col> -->

				</el-row>
			</el-form>
		</el-card>
		<el-card>
			<div slot="header" class="clearfix">
			    <span>年卡信息</span>
			    <el-button style="float: right; padding: 3px 0" type="text" @click="addCard">添加年卡</el-button>
			</div>
			<!-- form表单 -->
			<el-form ref="cardForm" :model="cardForm" :rules="cardRule" label-width="100px" class="demo-ruleForm" v-if="IsAddCardShow">
			 <el-row :gutter="10" >
				<el-col :span="12">
					<el-form-item label="姓名" prop="name">
					  <el-input v-model="cardForm.name" placeholder="姓名"></el-input>
					</el-form-item>
						<el-form-item label="性别" prop="sex">
							<el-select style="width: 100%;" v-model="cardForm.sex" placeholder="性别" clearable>
							  <el-option v-for="dict in dict.type.sys_user_sex" :key="(dict.value)" :label="dict.label"
								:value="Number(dict.value)" />
							</el-select>
					  </el-form-item>

					  	<el-form-item label="年龄" prop="age">
					  	  <el-input v-model="cardForm.age" placeholder="年龄"></el-input>
					  	</el-form-item>
						<el-row style=" width:100%;" >
							<el-col style=" width:100%;display : flex;justify-content:space-between;padding: 0 74px 0 100px;">
								<el-button style=" width:100px"  plain size="large" @click="handleRemoveCard"  >重置</el-button>
								<el-button style=" width:100px"  type="primary" plain size="large" @click="handleAddCard"  >新增</el-button>
								<!-- style="width: 400px;margin-left:  60px;"  -->
							</el-col>
						</el-row>
				</el-col>

				<Photo @getAvatar="getAvatar" ref="photo"/>

			</el-row>

			<!-- <el-row :gutter="60" class="mb8">
			  <el-col :span="10">
				<el-button style="width: 400px;margin-left: 60px;" type="primary" plain size="large" @click="handleAddCard"  >新增</el-button>
			  </el-col>
			</el-row> -->
			</el-form>

			<!-- table表格 -->
			<el-table :data="dataForm.cards" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%;margin-top: 30px;" v-if="tableShow">
				<el-table-column type="selection" width="50" align="center" />
				<el-table-column type="index" label="序号" width="60"></el-table-column>
				<el-table-column prop="name" width="200" label="姓名" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="url" width="120" label="头像" align="center">
				  <template slot-scope="scope">
				    <xImage :src="scope.row.url" />
				  </template>
				</el-table-column>
			  <el-table-column prop="num" width="160" label="编号" align="center" :show-overflow-tooltip="true" />
			  <el-table-column prop="sex" width="120" label="性别" align="center">
				<template slot-scope="scope">
				  <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
				</template>
			  </el-table-column>
				<el-table-column prop="age" width="200" label="年龄" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="beginDate" width="110" label="开始日期" align="center" :show-overflow-tooltip="true">
				  <template slot-scope="scope">
				    {{parseTime(scope.row.beginDate,'{y}-{m}-{d}')}}
				  </template>
				</el-table-column>
				<el-table-column prop="endDate" width="110" label="结束日期" align="center" :show-overflow-tooltip="true">
				  <template slot-scope="scope">
				    {{parseTime(scope.row.endDate,'{y}-{m}-{d}')}}
				  </template>
				</el-table-column>
				<el-table-column prop="createTime" width="" label="办卡时间" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="status" width="120" label="状态" align="center">
				  <template slot-scope="scope">
				    <dict-tag :options="dict.type.sys_card_status" :value="scope.row.status" />
				  </template>
				</el-table-column>
				<el-table-column prop="count" width="110" label="入园次数" align="center" :show-overflow-tooltip="true" />
				<!-- 年卡信息的修改 -->
				<el-table-column label="操作" fixed="right" align="center" width="160" class-name="small-padding fixed-width">
				  <template slot-scope="scope">
				    <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
				      v-hasPermi="[]">修改</el-button> -->
				    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCardDelete(scope.row)"
				      v-hasPermi="[]">删除</el-button>
				  </template>
				</el-table-column>
			</el-table>
			<!-- <span slot="footer" class="dialog-footer">
			  <el-button @click="IsAddCardShow = false">取消</el-button>
			  <el-button :loading="cardLoading" type="primary" @click="cardFormSubmit()">确定</el-button>
			</span> -->
		</el-card>

		<span slot="footer" class="dialog-footer">
			<el-button @click="dataFormCancle">取消</el-button>
			<el-button :loading="loading" type="primary" @click="dataFormSubmit()">确定</el-button>
		</span>
	</el-dialog>

</template>

<script>
  import {
    upload as uploadImage,getImg as getLoadImage
  } from '@/api/file'
  import {addOrUpdate} from "@/api/business/memberinfo";
  import {
    page  } from "@/api/business/memberinfo";
  // import {page,addOrUpdate as addCardUpdate  } from "@/api/business/cardinfo";
  import Photo from './photo.vue'
  import MyCamera from '@/components/Camera/index.vue'
  export default {
	dicts: ['sys_user_sex', 'sys_card_status'],
	components:{Photo},
    data () {
      return {
		  tableShow:true,
        imageApi: process.env.VUE_APP_IMAGE_BASE_URL,
		tackPhoto:true,
      	loading: false,
		cardLoading:false,
      	title:'',
        visible: false,
		avatarLsit:[],
		avatar:'',
		avatarPath:'',
		cardForm:{
		  id: 0,
		  name: '',
		  sex: '',
		  age: '',
		  url: '',
		  beginDate: '',
		  endDate: '',
		  createTime: '',
		  status: '',
		  count: '',
		  remark: '',
		  num: '',
		  memberId: '',
		},
		IsAddCardShow:false,
		cardRule: {
		    name: [
		      { required: true, message: '姓名不能为空', trigger: 'blur' }
		    ],
		    sex: [
		      { required: true, message: '性别不能为空', trigger: 'blur' }
		    ],
		    age: [
		      { required: true, message: '年龄不能为空', trigger: 'blur' }
		    ],
		    url: [
		      { required: true, message: '头像不能为空', trigger: 'blur' }
		    ]
		  },

        // 日期范围
        dateRange: [],

		base64Avarar:'',
		dataForm: {
          id: 0,
          name: '',
          sex: '',
          age: '',
          location: '',
          url: '',
          remark: '',
          num: '',
          createTime: '',
          mobile: '',
		  cards:[]
        },
		cardList:[],
        dataRule: {
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '性别不能为空', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '年龄不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '头像不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' }
          ]
        },
		queryParams:{
		  pageNum: 1,
		  pageSize: 10,
		  search: {
			keyword:''
		  },
      },
	  }
    },
    mounted(){
	},
	methods: {
		//删除年卡数据
		handleCardDelete(row){
			let that = this
			this.$modal.confirm('确定要删除选中的数据项？').then(function() {
				that.dataForm.cards= that.dataForm.cards.filter((item)=>{
					if(row.id){
						return item.id !== row.id
					}else{
						return item.name !== row.name
					}
				})
			}).then(()=>{
			  this.$modal.msgSuccess("删除成功");
			})
		},
		//重置年卡数据
		handleRemoveCard(){
			this.cardForm = {
			  id: 0,
			  name: '',
			  sex: '',
			  age: '',
			  url: '',
			  beginDate: '',
			  endDate: '',
			  createTime: '',
			  status: '',
			  count: '',
			  remark: '',
			  num: '',
			  memberId: ''
			}
			console.log('重置表单')
		},
		//新增年卡
		handleAddCard(){
			this.cardLoading = true
			this.$refs['cardForm'].validate((valid)=>{
				if(valid){
					this.cardForm.url = this.avatarPath
					// this.cardForm.baseUrl = this.avatar
					this.cardList.push(this.cardForm)
						// this.cardForm.url = this.avatarPath
						 console.log(this.dataForm.cards,'cards')
					this.dataForm.cards = this.dataForm.cards?.length>0?this.dataForm.cards:[]
						 console.log(this.dataForm.cards,'card11111s')
					this.dataForm.cards.push(this.cardForm)
					console.log('获取年卡信息',this.cardForm,this.dataForm)
					this.$nextTick(() => {
					  this.cardForm = {
						  id: 0,
						  name: '',
						  sex: '',
						  age: '',
						  url: '',
						  beginDate: '',
						  endDate: '',
						  createTime: '',
						  status: '',
						  count: '',
						  remark: '',
						  num: '',
						  memberId: ''
						}
					})
				}
			})

		},
		getAvatar(base64url,path){
			console.log('已经触发getavatra事件')
			this.avatar = base64url
			this.avatarPath = path
		},

		handleUpdate(data){
			//添加年卡
			console.log('添加年卡',data,this.dataForm)
			let id = data.id
			this.dataForm.cards.forEach((item)=>{
				if(item.id === id){
					this.cardForm = item
				}
			})
			console.log(this.cardForm,'cardform')
			// this.cardForm = this.dataForm.cards[0]
			// this.IsAddCardShow = true
		},
		//按照手机号查找年卡信息
		searchInfo(){
			console.log(this.dataForm.mobile,'consollmobile')
			const mobile = this.dataForm.mobile
			this.queryParams.search.keyword = mobile
			const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;
			if(reg.test(mobile)){
				console.log(this.queryParams.search.keyword,'llkkk')
				page(this.queryParams).then(res=>{
					if(res.data){
						console.log(res.data.list,'ressssss')
						// this.dataForm = res.data.list
					}
				})
			}else{
				  this.$modal.msgError("请输入正确的手机号！");
			}

		},
		//添加年卡点击事件
		addCard(){
			//弹出添加年卡table
			this.IsAddCardShow = true
			this.cardForm = {
				  id: '',
				  name: '',
				  sex: '',
				  age: '',
				  url: '',
				  beginDate: '',
				  endDate: '',
				  createTime: '',
				  status: '',
				  count: '',
				  remark: '',
				  num: '',
				  memberId: ''

			}
		},
		handleSelectionChange(){
			console.log('切换了')
		},
		getCardList(){
			this.loading = true;
			//根据手机号查询
		},
       init (record) {
		  console.log(record,'page返回的数据')
          this.visible=true
		  this.dataForm = record

			if(this.dataForm && this.dataForm.id){
			  this.title='会员信息表'+'修改'
			}else{
			  this.title='会员信息表'+"新增"
			}
      },
      //关闭表单
      dataFormCancle() {
        this.visible = false
        this.loading = false
		this.IsAddCardShow = false
        this.$emit('refreshDataList')
      },
      // 表单提交
      dataFormSubmit () {
      	this.loading = true;
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
				console.log(this.dataForm,'会员信息1',this.cardForm,'年卡信息1')
				addOrUpdate(this.dataForm).then(res=>{
					this.visible = false
	                this.loading = false
					this.IsAddCardShow = false
				    this.$modal.msgSuccess(this.title+"成功");
            		this.$emit('refreshDataList')
				}).catch(res => {
	              let _this = this
	              setTimeout(() => {
	                _this.loading = false
	              }, 2000)
	            })
          }else {
            this.loading = false
          }
        })
      },
	  },
	}
</script>
<style lang="scss">
	.card-title {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 60rpx;

	}
</style>
